<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>eBarrio</title>
	<link rel="stylesheet" href="<?php echo base_url(); ?>css/ui/themes/jquery.ui.all.css">
	<script src="<?php echo base_url(); ?>js/jquery-1.6.2.min.js"></script>
	<script src="<?php echo base_url(); ?>js/external/jquery.bgiframe-2.1.2.js"></script>
	<script src="<?php echo base_url(); ?>js/ui/jquery.ui.core.min.js"></script>
	<script src="<?php echo base_url(); ?>js/ui/jquery.ui.widget.min.js"></script>
	<script src="<?php echo base_url(); ?>js/ui/jquery.ui.mouse.min.js"></script>
	<script src="<?php echo base_url(); ?>js/ui/jquery.ui.button.min.js"></script>
	<script src="<?php echo base_url(); ?>js/ui/jquery.ui.draggable.min.js"></script>
	<script src="<?php echo base_url(); ?>js/ui/jquery.ui.position.min.js"></script>
	<script src="<?php echo base_url(); ?>js/ui/jquery.ui.resizable.min.js"></script>
	<script src="<?php echo base_url(); ?>js/ui/jquery.ui.dialog.min.js"></script>
	<script src="<?php echo base_url(); ?>js/ui/jquery.effects.core.min.js"></script>
	<link rel="stylesheet" href="<?php echo base_url(); ?>css/ui/demos.css">	
	<style>
		body { font-size: 62.5%; }
		label, input { display:block; }
		input.text { margin-bottom:12px; width:95%; padding: .4em; }
		fieldset { padding:0; border:0; margin-top:25px; }
		h1 { font-size: 1.2em; margin: .6em 0; }
		div#users-contain { width: 350px; margin: 20px 0; }
		div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
		div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
		.ui-dialog .ui-state-error { padding: .3em; }
		.validateTips { border: 1px solid transparent; padding: 0.3em; }
	</style>

        <?php
            require_once('/recaptcha/recaptchalib.php');
            $captcha_publickey = $publickey;
            $error_captcha=null;
        ?>

	<script>
	$(function() {
		// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
		//$( "#dialog:ui-dialog" ).dialog( "destroy" );
		
		var email = $( "#email" ),
			password = $( "#password" ),
			allFields = $( [] ).add( email ).add( password ),
			tips = $( ".validateTips" );

		function updateTips( t ) {
			tips
				.text( t )
				.addClass( "ui-state-highlight" );
			setTimeout(function() {
				tips.removeClass( "ui-state-highlight", 1500 );
			}, 500 );
		}

		function checkLength( o, n, min, max ) {
			if ( o.val().length > max || o.val().length < min ) {
				o.addClass( "ui-state-error" );
				updateTips( "La longitud de " + n + " ha de estar entre " +
					min + " y " + max + "." );
				return false;
			} else {
				return true;
			}
		}

		function checkRegexp( o, regexp, n ) {
			if ( !( regexp.test( o.val() ) ) ) {
				o.addClass( "ui-state-error" );
				updateTips( n );
				return false;
			} else {
				return true;
			}
		}
		
		$( "#dialog-form" ).dialog({
			autoOpen: false,
			height: 400,
			width: 350,
			modal: true,
			buttons: {
				"Mandarme más información": function() {
					var bValid = true;
					allFields.removeClass( "ui-state-error" );

					bValid = bValid && checkLength( email, "email", 6, 80 );
					bValid = bValid && checkLength( password, "código postal", 5, 5);

					bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" );
					bValid = bValid && checkRegexp( password, /^([0-9])+$/, "El código postal sólo admite números" );

					if ( bValid ) {
                                                // Si se ha validado los campos de entrada, seguidamente se valida el CAPTCHA
                                              var challengeField = $("input#recaptcha_challenge_field").val();
                                              var responseField = $("input#recaptcha_response_field").val();


                                              var objajaxcaptcha = $.post("<?php echo site_url(); ?>preliminar/validar_captcha", { recaptcha_challenge_field: challengeField, recaptcha_response_field: responseField });


                                                objajaxcaptcha.success(function(respuesta,textostatus){
                                                        switch (respuesta) {
                                                            case "success":

                                                                $( "#cargando" ).dialog( "open" );

                                                                var objajax = $.post("<?php echo site_url(); ?>preliminar/insertar_email", { email: email.val(), cod_postal: password.val() });

                                                                objajax.error(function(){

                                                                    $( "#error" ).dialog( "open" );
                                                                });

                                                                objajax.success(function(respuesta,textostatus){
                                                                    $( "#cargando" ).dialog( "close" );
                                                                    switch (respuesta) {
                                                                        case "0":
                                                                            $( "#dialog-form" ).dialog( "close" );
                                                                            $( "#aviso-correcto" ).dialog( "open" );
                                                                            break

                                                                        default:
                                                                            $( "#error" ).dialog( "open" );

                                                                    }
                                                                });
                                                                
                                                                $( "#dialog-form" ).dialog( "close" );
                                                                break;

                                                            default:
                                                                $( "#error-captcha" ).dialog( "open" );
                                                                Recaptcha.reload();
                                                        }
                                                    });


					
                                                
					} // fin de las validaciones
				},
				Cancel: function() {
					$( this ).dialog( "close" );
                                        Recaptcha.reload();
				}
			},
			close: function() {
				allFields.val( "" ).removeClass( "ui-state-error" );
                                Recaptcha.reload();
			}
		});

		$( "#preregistro" )
			.button()
			.click(function() {
				$( "#dialog-form" ).dialog( "open" );
        	});

                $( "#aviso-correcto" ).dialog({
			autoOpen: false,
			modal: true,
			buttons: {
				Ok: function() {
					$( this ).dialog( "close" );
				}
			}
		});

                $( "#error" ).dialog({
			autoOpen: false,
			modal: true,
			buttons: {
				Ok: function() {
					$( this ).dialog( "close" );
				}
			}
		});

                $( "#error-captcha" ).dialog({
			autoOpen: false,
			modal: true,
			buttons: {
				Ok: function() {
					$( this ).dialog( "close" );
				}
			}
		});

                $( "#cargando" ).dialog({
			autoOpen: false,
			modal: true
		});

	});
	</script>
</head>
<body>


<div class="container">
    <div class="content">
		<div align="center">
            <img src="<?php echo base_url(); ?>img/Icono.png" width="358" height="191" align="middle" />
            <p>
                el barrio donde vives, aún más cerca
            </p>
			<button id="preregistro">Quiero saber más</button>
		</div>
    </div>
</div>


<div class="principal">

<div id="dialog-form" title="Quiero saber más" style="display: none;">
	<p class="validateTips">Todos los campos son obligatorios.</p>

	<form>
	<fieldset>
		<label for="email">Email</label>
		<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
		<label for="password">Código Postal</label>
		<input type="text" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
        <?php
            //escribimos en la página lo que nos devuelve recaptcha_get_html()
            echo recaptcha_get_html($captcha_publickey, $error_captcha);
        ?>
	</fieldset>
        <br>
	</form>
</div>

    
<!-- Mensajes -->
<div id="aviso-correcto" title="Preregistro realizado"  style="display: none;">
	<p>
            <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
            Se ha enviado un mail a la dirección introducida.
        </p>
	<p>Para completar el preregistro ha de pulsar sobre el enlace <b>ACTIVAR</b> del correo que reciba.</p>
</div>

<div id="error" title="Error inesperado" style="display: none;">
	<p>
            <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
           Se ha producido un error inesperado en su preregistro.
        </p>
	<p>Intentelo de nuevo. Si el error persiste, pongase en contacto con nosotros en la siguiente dirección:</p>
        <p><b>preresgisro-soporte@ebarrio.es</b></p>
</div>

<div id="error-captcha" title="Captcha incorrecto" style="display: none;">
	<p>El captcha introducido es icorrecto.</p>
	<p>Intentelo de nuevo. Si el error persiste, pongase en contacto con nosotros en la siguiente dirección:</p>
        <p><b>preresgisro-soporte@ebarrio.es</b></p>
</div>

<div id="cargando" title="En Proceso" style="display: none;">
	<p>Se está procesando la información para enviarle un mail de acivación.</p>
</div>

</div><!-- End Principal -->


</body>
</html>
